<template>
  <view class="container">
    <!-- 骨架屏 -->
    <view v-if="loading && !hasInitialData" class="skeleton-container">
      <view class="skeleton-banner"></view>
      <view class="skeleton-category">
        <view class="skeleton-icon"></view>
        <view class="skeleton-icon"></view>
      </view>
      <view class="skeleton-filter"></view>
      <view class="skeleton-cards">
        <view class="skeleton-card" v-for="i in 3" :key="i"></view>
      </view>
    </view>
    
    <!-- 主要内容 -->
    <scroll-view 
      scroll-y="true" 
      :scroll-with-animation="true" 
      :enable-back-to-top="true" 
      :show-scrollbar="false" 
      class="main-scroll-view" 
      v-else
    >
      <!-- Banner轮播 -->
      <BannerSwiper 
        :banners="banners"
        :autoplay="bannerAutoplay"
        ref="bannerSwiper"
        
        @change="onBannerChange"
        @loaded="onBannerLoaded"
        @error="onBannerError"
      />
      
      <!-- 分类导航 -->
      <view class="category-row">
        <view class="category-item" @click="goToPark">
          <view class="icon-bg">
            <image src="/static/assets/home/home-icon-part.png" mode="aspectFit" style="width:223rpx;height:144rpx;" />
          </view>
          <text class="category-text">核心园区</text>
        </view>
        <view class="category-line"/>
        <view class="category-item" @click="goToWarehouse">
          <view class="icon-bg">
            <image src="/static/assets/home/home-icon-source-2.png" mode="aspectFit" style="width:184rpx;height:158rpx;" />
          </view>
          <text class="category-text">智慧仓储</text>
        </view>
      </view>

      <!-- 筛选器 -->
      <view 
        class="filter-row" 
        :class="{ 'filter-row-fixed': filterFixed }" 
        ref="filterRow"
      >
        <view class="custom-segmented-control">
          <view
            v-for="(item, idx) in filters"
            :key="item.typeId"
            class="segmented-item"
            :class="{ active: currentFilter === item.typeId }"
            @click="onFilterChange({ currentIndex: item.typeId })"
          >
            {{ item.typeName }}
          </view>
        </view>
      </view>

      <view v-if="filterFixed" :style="{height: filterRowHeight + 'px',background:'#000000'}"></view>
      
      <!-- 仓库列表 -->
      <view v-if="!loading && warehouseList.length" class="warehouse-list">
        <view v-for="(item, idx) in warehouseList" :key="item.id || idx" class="warehouse-card">
          <WarehourseItem 
            :item="item" 
            @detail="goToDetail(item)"
          />
        </view>
        <view v-if="hasMore" class="load-more" @click="loadMore">
          <uni-load-more :status="loadMoreStatus" :content-text="loadMoreText"></uni-load-more>
        </view>
      </view>

      <view v-else-if="!loading && !warehouseList.length" class="empty-state">
        <text class="empty-text">暂无相关仓库信息</text>
      </view>

      <!-- 资讯列表 -->
      <view class="section-news">
        <view class="section-title">
          <text>市场资讯</text>
          <view class="more" @click="switchToNews">
            更多
            <uni-icons type="right" size="12" color="var(--primary-color)"></uni-icons>
          </view>
        </view>
        <scroll-view 
          class="news-scroll"
          scroll-x="true"
          show-scrollbar="false"
          enable-flex="true"
          v-if="newsList.length > 0"
        >
          <view class="news-list">
            <view 
              class="news-card"
              v-for="(news, idx) in newsList"
              :key="news.id || idx"
              @click="goNewsInfo(news)"
            >
              <image 
                :src="news.thumbnailUrl" 
                class="news-img" 
                @error="onNewsImageError(idx)"
              ></image>
              <view class="news-title-bg">
                <text class="news-title">{{ news.title }}</text>
                <!-- <text class="news-desc">{{ news.desc || news.content }}</text> -->
              </view>
            </view>
          </view>
        </scroll-view>
        <view v-else-if="!loading" class="empty-news-tip">
          <text>暂无资讯信息</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import WarehourseItem from '@/components/warehourseItem.vue';
import BannerSwiper from '@/components/BannerSwiper.vue';
import { API } from '@/utils/api.js';
const throttle = function(func, limit = 300) {
  var inThrottle;
  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(function() { inThrottle = false; }, limit);
    }
  };
};
import { 
  getFullUrl, 
  processWarehouseUrls, 
  processNewsUrls 
} from '@/utils/url-helper.js';
import { networkOptimizer } from '@/utils/network-optimizer.js';

export default {
  components: {
    WarehourseItem,
    BannerSwiper
  },
  
  data() {
    return {
      // 数据列表
      banners: [],
      warehouseList: [],
      newsList: [],
      
      // 筛选状态
      currentFilter: -1,
      filters: [],
      
      // 加载状态
      loading: false,
      hasInitialData: false,
      hasMore: true,
      currentPage: 1,
      pageSize: 20,
      loadMoreStatus: 'more',
      
      // UI状态
      categoryActive: '',
      filterFixed: false,
      filterRowHeight: 0,
      bannerCurrentIndex: 0,
      errorMessage: '',
      currentIndex: 0,
      // 网络配置
      requestConfig: networkOptimizer.createRequestConfig({
        cacheAge: 3 * 60 * 1000,
        retries: 2,
        timeout: 8000
      }),
      // Banner自动播放状态
      bannerAutoplay: true,
      isAnimating: false, // 防止动画过程中的闪烁
      autoplayTimer: null, // 自动播放定时器
    }
  },

  computed: {
    loadMoreText() {
      return {
        contentdown: '上拉显示更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据了'
      }
    }
  },

  methods: {
    getFullUrl,
    onShareAppMessage(res) {
      console.log("onShareAppMessage", res);
      return {
        title: '百联物流',
        path: '/pages/index/index',
        imageUrl: '/static/sourceInfo/source-bottom-share.png'
      }
    },
    onShareTimeline(res) {
      console.log("onShareTimeline", res);
    },
    // 页面数据加载
    async loadPageData() {
      try {
        this.loading = true;
        this.errorMessage = '';
        
        const [bannerResult, warehouseTypesResult, warehouseResult, newsResult] = await Promise.allSettled([
          this.loadBannerData(),
          this.loadWarehouseTypes(),
          this.loadWarehouseData(),
          this.loadNewsData()
        ]);

        this.processResults(bannerResult, warehouseTypesResult, warehouseResult, newsResult);
        this.hasInitialData = true;
        
      } catch (error) {
        console.error('页面数据加载失败:', error);
        this.handleLoadError(error);
      } finally {
        this.loading = false;
      }
    },

    // 加载各类数据
    async loadBannerData() {
      return await networkOptimizer.smartRequest(
        () => API.banner.getList({bannerPage:'home'}),
        { ...this.requestConfig, cacheKey: 'banner_home', priority: 'high' }
      );
    },

    async loadWarehouseTypes() {
      return await networkOptimizer.smartRequest(
        () => API.home.getWarehouseTypes({isShowHome:1}),
        { ...this.requestConfig, cacheKey: 'warehouse_types', priority: 'normal' }
      );
    },

    async loadWarehouseData() {
      return await this.loadWarehouseList({ isInitialLoad: true });
    },

    async loadNewsData() {
      return await networkOptimizer.smartRequest(
        () => API.news.getList({
          page: 1,
          size: 5,
        }),
        { ...this.requestConfig, cacheKey: 'news_home', priority: 'low' }
      );
    },

    // 处理加载结果
    processResults(bannerResult, warehouseTypesResult, warehouseResult, newsResult) {
      // 处理Banner
      if (bannerResult.status === 'fulfilled' && bannerResult.value) {
        this.banners = Array.isArray(bannerResult.value) 
          ? bannerResult.value.map(item => ({ ...item, bannerType: Number(item.bannerType) }))
          : [];
      }

      // 处理仓库类型
      if (warehouseTypesResult.status === 'fulfilled' && warehouseTypesResult.value) {
        this.filters = [{typeName:'推荐',typeId:-1}, ...warehouseTypesResult.value.rows];
      }

      // 处理仓库
      if (warehouseResult.status === 'fulfilled' && warehouseResult.value) {
        console.log(warehouseResult.value);
        const warehouseData = warehouseResult.value;
        if (warehouseData.rows) {
          this.warehouseList = processWarehouseUrls(warehouseData.rows);
          this.warehouseList.forEach(item => {
            if(item.vrLink && item.vrLink.length > 0){
              item.warehouseTags = [{
                tagName: 'VR看仓',
                tagImage: '/static/assets/home/home-icon-vr.png',
                tagId: -2
              },...item.warehouseTags];
            }
            if(item.isRecommend){
              item.warehouseTags = [{
                tagName: '推荐',
                tagImage: '/static/assets/home/home-isRecommend.png',
                tagId: -1
              },...item.warehouseTags];
            }
          });
          this.hasMore = warehouseData.rows.length >= this.pageSize;
        } else {
          this.warehouseList = [];
          this.hasMore = false;
        }
      }

      // 处理资讯
      if (newsResult.status === 'fulfilled' && newsResult.value) {
        const newsData = newsResult.value;
        if (newsData.rows?.length > 0) {
          console.log("newsData.rows",newsData.rows);
          this.newsList = processNewsUrls(newsData.rows);
          console.log("this.newsList",this.newsList);
        }
      }
    },

    // 筛选条件改变
    async onFilterChange(e) {
      console.log("e--------",e);
      if (this.currentFilter === e.currentIndex) {
        return;
      }
      this.currentFilter = e.currentIndex;

      this.currentPage = 1;
      this.hasMore = true;
      networkOptimizer.clearCache('warehouse_home');
      await this.loadWarehouseList();
    },
    
    // 统一的仓库列表加载方法
    async loadWarehouseList(options = {}) {
      const { isInitialLoad = false, isLoadMore = false } = options;
      
      try {
        if (!isLoadMore) {
          this.loading = true;
        }
        
        // 构建请求参数
        const requestParams = {
          page: this.currentPage,
          size: this.pageSize,
          status: 'active'
        };
        if(this.currentFilter === -1){
          requestParams.isRecommend = 1;
        }else{
          requestParams.warehouseType = this.currentFilter;
        }
        
        // 构建缓存键
        const cacheKey = isInitialLoad 
          ? 'warehouse_home' 
          : `warehouse_list_${this.currentFilter}_${this.currentPage}`;
        
        const result = await networkOptimizer.smartRequest(
          () => API.warehouse.getList(requestParams),
          {
            ...this.requestConfig,
            cacheKey,
            useCache: isInitialLoad || this.currentPage === 1,
            priority: 'normal'
          }
        );
        
        // 处理返回结果
        if (result?.list || result?.rows) {
          const processedList = processWarehouseUrls(result.list || result.rows);
          
          if (isInitialLoad || this.currentPage === 1) {
            this.warehouseList = processedList;
          } else {
            this.warehouseList = [...this.warehouseList, ...processedList];
          }
               this.warehouseList.forEach(item => {
              if(item.vrLink && item.vrLink.length > 0){
                item.warehouseTags = [{
                  tagName: 'VR看仓',
                  tagImage: '/static/assets/home/home-icon-vr.png',
                  tagId: -2
                },...item.warehouseTags];
              }
              if(item.isRecommend){
                item.warehouseTags = [{
                  tagName: '推荐',
                  tagImage: '/static/assets/home/home-isRecommend.png',
                  tagId: -1
                },...item.warehouseTags];
              }
            });
          this.hasMore = result.list?.length || result.rows?.length >= this.pageSize;
        } else {
          if (isInitialLoad || this.currentPage === 1) {
            this.warehouseList = [];
          }
          this.hasMore = false;
        }
        
        return result;
        
      } catch (error) {
        console.error('仓库列表加载失败:', error);
        if (!isLoadMore) {
          uni.showToast({ title: '加载失败', icon: 'none' });
        }
        throw error;
      } finally {
        if (!isLoadMore) {
          this.loading = false;
        }
      }
    },
    
    // 加载更多
    async loadMore() {
      if (this.loading || !this.hasMore) return;
      
      this.currentPage++;
      this.loadMoreStatus = 'loading';
      
      try {
        await this.loadWarehouseList({ isLoadMore: true });
        this.loadMoreStatus = this.hasMore ? 'more' : 'noMore';
      } catch (error) {
        this.loadMoreStatus = 'more';
        this.currentPage--;
      }
    },
    
    // 错误处理
    handleLoadError(error) {
      this.errorMessage = '数据加载失败，请稍后重试';
      this.$refs.errorPopup.open();
    },
    
    async retryLoad() {
      this.$refs.errorPopup.close();
      networkOptimizer.clearCache();
      await this.loadPageData();
    },
    
    // Banner事件
    onBannerChange(e) {
      this.bannerCurrentIndex = e.current;
    },
    
    onBannerLoaded() {
      // Banner加载完成
    },
    
    onBannerError(errorData) {
      console.warn('Banner加载失败:', errorData);
      const message = errorData.type === 'video' ? '视频加载失败' : '图片加载失败';
      uni.showToast({ title: message, icon: 'none', duration: 2000 });
    },
    
    // 页面跳转
    goToDetail(item) {
      if (item?.id || item?.warehouseId) {
        const id = item.id || item.warehouseId;
        uni.navigateTo({ 
          url: '/pages/warehouse/warehouseDetail?id=' + encodeURIComponent(id) 
        });
      } else {
        uni.showToast({ title: '缺少仓库ID', icon: 'none' });
      }
    },
    
    goToPark() {
      this.categoryActive = 'park';
      setTimeout(() => {
        this.categoryActive = '';
        uni.navigateTo({ url: '/pages/parkMap/parkMap' });
      }, 150);
    },
    
    goToWarehouse() {
      this.categoryActive = 'warehouse';
      setTimeout(() => {
        this.categoryActive = '';
        uni.navigateTo({ url: '/pages/warehouse/AIwareHouse' });
      }, 150);
    },
    
    switchToNews() {
      uni.switchTab({ url: '/pages/news/news' });
    },
    
    goNewsInfo(news) {
      if (news?.id) {
     			uni.navigateTo({ url: '/pages/news/newsInfo?id=' + news.id})
      }
    },
    
    // 资讯图片错误处理
    onNewsImageError(index) {
      this.$set(this.newsList[index], 'img', '/static/images/default-news.png');
    },
    
    // 滚动处理
    handlePageScroll: throttle(function(e) {
      if (this.filterRowTop === 0) {
        this.calcFilterRow();
        return;
      }
      if (e.scrollTop >= this.filterRowTop) {
        if (!this.filterFixed) this.filterFixed = true;
      } else {
        if (this.filterFixed) this.filterFixed = false;
      }
    }, 16),
    
    calcFilterRow() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.filter-row').boundingClientRect((rect) => {
          if (rect) {
            this.filterRowTop = rect.top + (rect.top === 0 ? 0 : uni.getSystemInfoSync().windowScrollY || 0);
            this.filterRowHeight = rect.height;
          }
        }).exec();
      });
    },

    // Banner自动播放控制
    toggleBannerAutoplay() {
      this.bannerAutoplay = !this.bannerAutoplay;
      if (this.$refs.bannerSwiper) {
        this.$refs.bannerSwiper.toggleAutoplay();
      }
    },

    // 手动控制自动播放，避免小程序原生autoplay的闪烁问题
    startAutoplay() {
      this.stopAutoplay(); // 先清除之前的定时器
      if (this.banners.length > 1) {
        this.autoplayTimer = setInterval(() => {
          if (!this.isAnimating) {
            this.next();
          }
        }, this.interval);
      }
    },

    // 停止自动播放
    stopAutoplay() {
      if (this.autoplayTimer) {
        clearInterval(this.autoplayTimer);
        this.autoplayTimer = null;
      }
    },

    // 动画完成事件，用于防止闪烁
    onAnimationFinish(e) {
      this.isAnimating = false;
      const newIndex = e.detail.current;
      if (newIndex >= 0 && newIndex < this.banners.length) {
        this.currentIndex = newIndex;
      }
    },

    // 小程序中，当banner数量小于等于2时，禁用循环滚动避免闪烁
    shouldUseCircular() {
      return this.banners.length > 2;
    }
  },

  async onLoad() {
    await this.loadPageData();
  },

  async onPullDownRefresh() {
    this.currentPage = 1;
    this.hasMore = true;
    await this.loadPageData();
    uni.stopPullDownRefresh();
  },

  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore();
    }
  },

  mounted() {
    this.calcFilterRow();
    uni.$on('onPageScroll', this.handlePageScroll);
  },

  beforeDestroy() {
    uni.$off('onPageScroll', this.handlePageScroll);
  }
}
</script>

<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: #ffffff;
  padding-bottom: 40rpx;
}

.main-scroll-view{
  height: 100vh;
  
  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
}

/* 隐藏页面内所有元素的滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 小程序中隐藏滚动条 */
page {
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
}

// 骨架屏样式
.skeleton-container {
  .skeleton-banner {
    width: 100%;
    height: 420rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 0 0 24rpx 24rpx;
  }
  
  .skeleton-category {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 16rpx 0 8rpx 0;
    
    .skeleton-icon {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }
  }
  
  .skeleton-filter {
    margin: 20rpx 26rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 32rpx;
  }
  
  .skeleton-cards {
    padding: 0 26rpx;
    
    .skeleton-card {
      height: 200rpx;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
    }
  }
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.category-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 16rpx 26rpx 8rpx 26rpx;
  // border: 1rpx solid #AEAEAE;
  border-radius: 16rpx;
  box-sizing: border-box;
  box-shadow: 0 4rpx 16rpx 0 #3F3F3F1A; /* 添加阴影 */

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    // color: #C6282B;
    // transition: all 0.3s ease;
    // cursor: pointer;
    position: relative;
    padding: 16rpx;
    // border-radius: 16rpx;
    // box-shadow: 0 2rpx 8rpx 0 rgba(0,0,0,0.06); /* 给每个item也加一点阴影 */

    // // 移除点击时的背景色和缩放效果
    // &:active {
    //   transform: none;
    //   background: transparent !important;
    // }
    
    // &.category-item-active {
    //   // background: rgba(198,40,43,0.1);
    //   transform: none;
    // }
    
    .icon-bg {
      // width: 116rpx;
      // height: 116rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8rpx;
    }
    
    .category-text {
      margin-top: 10rpx;
      color: #3F3F3F;
      font-size: 30rpx;
      font-weight: bold;
    }
  }
  
  .category-line {
    width: 1.5rpx;
    height: 120rpx;
    // background-color: #3F3F3F;
    background: linear-gradient(to bottom, transparent, #3F3F3F, transparent);
  }
}

.filter-row {
  margin: 20rpx 26rpx 20rpx 26rpx;
  background: #ffffff;
  transition: all 0.3s ease;
  z-index: 1;
  // border-bottom: 1rpx solid #AEAEAE;

  .custom-segmented-control {
    display: flex;
    // background: #f0f1f5;
    border-radius: 32rpx;
    margin: 0 0 10rpx 0;
    padding: 8rpx;
    gap: 20rpx;
    .segmented-item {
      flex: 1;
      text-align: center;
      padding: 10rpx 12rpx;
      font-size: 26rpx;
      color: #3F3F3F;
      background: #fff;
      // transition: all 0.3s ease;
      // cursor: pointer;
      position: relative;
      overflow: hidden;
      border-radius: 32rpx;
      margin: 0 4rpx;
      border: 1rpx solid #3F3F3F1A;
      // &::before {
      //   content: '';
      //   position: absolute;
      //   top: 0;
      //   left: -100%;
      //   width: 100%;
      //   height: 100%;
      //   background: transparent;
      // }
      
      // &:active::before {
      //   left: 100%;
      // }
      
      &.active {
        /* 小程序中部分平台 background 可能无效，使用!important 提高优先级 */
        background: #C6282B !important;
        color: #fff !important;
        font-weight: 600;
        // box-shadow: 0 4rpx 12rpx rgba(255,77,79,0.3);
        // transform: translateY(-2rpx);
      }
    }
  }
}

.filter-row-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 !important;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
  background: #ffffff;
  z-index: 99;
  width: 100vw;
  backdrop-filter: blur(10rpx);
  padding: 0 26rpx;
  box-sizing: border-box;
}

.warehouse-list {
  padding: 10rpx 0rpx 0rpx 0rpx;
  margin-top: 30rpx;
  border-top-width: 1rpx;
  border-top-style: solid;
  border-top-color: #3F3F3F1A;
  .warehouse-card {
    margin-bottom: 20rpx;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.load-more {
  padding: 20rpx 0;
  text-align: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  min-height: 500rpx;
  
  .empty-text {
    color: #999;
    font-size: 28rpx;
    margin-bottom: 30rpx;
  }
}

.section-news {
  margin-top: 24rpx;
  
  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 26rpx 30rpx 26rpx;
    color: #3F3F3F;
    
    text {
      font-size: 30rpx;
      font-weight: 600;
    }
    
    .more {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #3F3F3F;
      padding: 8rpx 12rpx;
      border-radius: 16rpx;
      transition: all 0.3s ease;
      
      // &:active {
      //   background: rgba(198,40,43,0.1);
      //   transform: scale(0.95);
      // }
    }
  }
  
  .news-scroll {
    width: 100%;
    white-space: nowrap;
    padding-left: 20rpx;
    padding-right: 20rpx;
    box-sizing: border-box;
  }
  
  .news-list {
    display: flex;
    flex-direction: row;
	width: 100vw;
	padding: 0 16rpx;
	gap: 20rpx;
  }
  
  .news-card {
    width: 520rpx;
    height: 300rpx;
    // margin-right: 16rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4rpx 16rpx #3F3F3F1A;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
    
    // &:active {
    //   transform: scale(0.98);
    //   box-shadow: 0 8rpx 24rpx #3F3F3F1A;
    // }
    
    .news-img {
      width: auto;
       height:  300rpx;
      object-fit: fill;
      display: block;
    }
    
    .news-title-bg {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10rpx;
      // background: linear-gradient(transparent, rgba(0,0,0,0.7));
      padding: 20rpx 12rpx 12rpx 12rpx;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
    }
    
    .news-title {
      color: #fff;
      font-size: 30rpx;
      font-weight: 600;
      line-height: 32rpx;
      text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
    }
    
    .news-desc {
      color: rgba(255,255,255,0.8);
      font-size: 18rpx;
      margin-top: 4rpx;
      line-height: 24rpx;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
    }
  }
}

.empty-news-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #bbb;
  font-size: 24rpx;
  margin: 40rpx 0;
  min-height: 300rpx;
}

.banner-controls {
  position: absolute;
  top: 400rpx; /* Adjust based on BannerSwiper height */
  right: 20rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 24rpx;
  padding: 8rpx 12rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
  backdrop-filter: blur(10rpx);

  .control-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8rpx 12rpx;
    border-radius: 16rpx;
    // transition: all 0.3s ease;

    // &:active {
    //   background: rgba(198, 40, 43, 0.1);
    //   transform: scale(0.95);
    // }
  }

  .control-text {
    font-size: 20rpx;
    color: #3F3F3F;
    margin-top: 4rpx;
  }
}

// 错误弹窗样式
.error-popup {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx;
  text-align: center;
  min-width: 400rpx;
  
  .error-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
  }
  
  .error-message {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 30rpx;
    display: block;
  }
  
  .error-retry-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 24rpx;
    padding: 16rpx 32rpx;
    font-size: 26rpx;
    
    // &:active {
    //   transform: scale(0.95);
    // }
  }
}
</style> 